<template>
  <div class="mappage">
    <div class="section">
      <input type="text" placeholder="搜索" focus="true" v-model="keywords" @input="bindInput" />
    </div>
    <scroll-view :scroll-y="true" class="addcont" style="height:500rpx;">
      <div
        class="result"
        @touchstart="bindSearch(item.name)"
        v-for="(item, index) in tips"
        :key="index"
      >{{item.name}}</div>
    </scroll-view>
    <div class="map-container">
      <div class="title">
        显示当前位置:
        <!-- 小程序默认的标签 -->
        <map
          name="map"
          id="map"
          scale="16"
          :longitude="longitude"
          :latitude="latitude"
          :markers="markers"
        ></map>
      </div>
    </div>
  </div>
</template>

<script>
import amapFile from "../../utils/amap-wx";
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      tips: [],
      longitude: 0,
      latitude: 0,
      markers: [],
      keywords: ""
    };
  },
  mounted() {
    this.getMapaddress();
  },
  methods: {
    ...mapMutations(["update"]),
    getMapaddress() {
      //`这个_this就可以理解为vue组件的this 因为有高德地图的回调防止修改作用域，就这么写一下
      let _this = this;
      var myAmapFun = new amapFile.AMapWX({
        key: "c2f5d6fb277ece13787170b1160eacbc"
      });
      myAmapFun.getRegeo({
        iconPath: "/static/images/marker.png",
        iconWidth: 22,
        iconHeight: 32,
        success: function(data) {
          console.log(data);
          let marker = [
            {
              id: data[0].id,
              latitude: data[0].latitude,
              longitude: data[0].longitude,
              width: data[0].width,
              height: data[0].height
            }
          ];
          //就是data的中的数据
          _this.markers = marker;
          _this.latitude = data[0].latitude;
          _this.longitude = data[0].longitude;
        }
      });
    },
    bindInput(e) {
      let _this = this;
      let keywords = _this.keywords;
      var myAmapFun = new amapFile.AMapWX({
        key: "c2f5d6fb277ece13787170b1160eacbc"
      });
      //`用于搜索补全的方法
      myAmapFun.getInputtips({
        keywords: keywords,
        location: "",
        success: function(data) {
          if (data && data.tips) {
            //-将高德地图返回的数据添加到tips中，然后上面的scroll-view进行vfor渲染
            _this.tips = data.tips;
          }
        }
      });
    },
    bindSearch(cityName) {
      this.update({ cityName: cityName });
      wx.navigateBack({
        //返回上1个页面
        delta: 1
      });
    }
  }
};
</script>

<style scoped lang="less">
@import url("./style.less");
</style>